<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>故障分布图显示效果测试</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1a1a1a;
            color: #fff;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .chart-container {
            position: relative;
            height: 400px;
            margin: 20px 0;
            background-color: #2a2a2a;
            border-radius: 8px;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #2196F3;
        }
        .description {
            background-color: #333;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        .test-info {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>故障分布图显示效果测试</h1>
        
        <div class="description">
            <h3>测试说明：</h3>
            <ul>
                <li>故障分布图显示X轴和Y轴的坐标轴线条</li>
                <li>显示网格线，提供参考线</li>
                <li>不显示X轴和Y轴的刻度值</li>
                <li>鼠标悬停在数据点上时显示详细信息</li>
                <li>显示位置信息和故障类型</li>
            </ul>
        </div>

        <div class="test-info">
            <strong>测试步骤：</strong>
            <ol>
                <li>观察图表是否显示坐标轴线条</li>
                <li>观察是否显示网格线</li>
                <li>确认是否不显示刻度值</li>
                <li>将鼠标悬停在任意数据点上</li>
                <li>查看是否显示tooltip信息</li>
                <li>确认tooltip显示位置和故障类型</li>
            </ol>
        </div>

        <div class="chart-container">
            <canvas id="scatterChart"></canvas>
        </div>
    </div>

    <script>
        // 模拟故障数据
        const faultData = [
            { type: '无故障', x: 50, y: 0, color: '#2196F3' },
            { type: '无故障', x: 100, y: 0, color: '#2196F3' },
            { type: '无故障', x: 150, y: 0, color: '#2196F3' },
            { type: '停车位', x: 30, y: 0, color: '#000000' },
            { type: '停车位', x: 80, y: 0, color: '#000000' },
            { type: '横条', x: 45, y: 1, color: '#FF5722' },
            { type: '横条', x: 95, y: 1, color: '#FF5722' },
            { type: '断头', x: 60, y: 2, color: '#F44336' },
            { type: '断头', x: 110, y: 2, color: '#F44336' },
            { type: '油污', x: 75, y: 4, color: '#9C27B0' },
            { type: '油污', x: 125, y: 4, color: '#9C27B0' }
        ];

        // 按类型分组数据
        const faultGroups = {};
        faultData.forEach(fault => {
            if (!faultGroups[fault.type]) {
                faultGroups[fault.type] = [];
            }
            faultGroups[fault.type].push({x: fault.x, y: fault.y});
        });

        const scatterDatasets = Object.keys(faultGroups).map(type => ({
            label: type,
            data: faultGroups[type],
            backgroundColor: faultData.find(f => f.type === type).color,
            pointRadius: 6
        }));

        // 创建故障分布图
        const ctx = document.getElementById('scatterChart').getContext('2d');
        new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: scatterDatasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#fff',
                            font: {
                                size: 12
                            }
                        }
                    },
                    datalabels: {
                        display: false // 不显示数据点上的数值标签
                    }
                },
                scales: {
                    x: {
                        type: 'linear',
                        position: 'bottom',
                        min: 0,
                        max: 292.5,
                        display: true, // 显示X轴
                        ticks: {
                            color: '#fff',
                            display: true, // 显示X轴刻度值
                            callback: function(value) {
                                return value.toFixed(1);
                            }
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)' // 显示网格线
                        }
                    },
                    y: {
                        type: 'linear',
                        position: 'left',
                        min: -0.5,
                        max: 4.5, // 根据实际数据动态调整
                        display: true, // 显示Y轴
                        ticks: {
                            color: '#fff',
                            display: true, // 显示Y轴刻度值
                            callback: function(value) {
                                const labels = ['', '横条', '断头', '', '油污'];
                                return labels[value] || '';
                            }
                        },
                        grid: {
                            color: 'rgba(255, 255, 255, 0.1)', // 显示网格线
                            drawTicks: false
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'nearest'
                },
                plugins: {
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            title: function(context) {
                                return `位置: ${context[0].parsed.x.toFixed(1)}`;
                            },
                            label: function(context) {
                                return `故障类型: ${context.dataset.label}`;
                            }
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>
